<template>
	<view>
		<barHeight></barHeight>
		<swiperSearch :topList="topList" name="infomation"></swiperSearch>
		<zjcscrollnav type="information" :platformList="cateList.category"></zjcscrollnav>
		<!--#ifdef APP -->
		<u-sticky offset-top="20">
			<!--#endif-->
			<view class="tab-box">
				<view class="tab">
					<view :class="index==0?'lan':'hei'" class="color3" @click="tab(0)">
						{{ $t('information.Highligh') }}
						<view class="xian" v-if="index=='0'"></view>
					</view>
					<view :class="index==1?'lan':'hei'" class="color3" @click="tab(1)">
						{{ $t('information.Lastest') }}
						<view class="xian" v-if="index=='1'"></view>
					</view>
					<view :class="index==2?'lan':'hei'" class="color3" @click="tab(2)">
						{{ $t('information.Nearest') }}
						<view class="xian" v-if="index=='2'"></view>
					</view>
				</view>
			</view>
			<!--#ifdef APP -->
		</u-sticky>
		<!--#endif-->
		<view class="">
			<postlist :list="InfoList"></postlist>
		</view>
		<view class="apply" @click="submit">
			<image src="/static/information/box.png"></image>
			<view class="text">
				<view class="s">{{ $t('release.POST') }}</view>
				<view class="x">{{ $t('release.Myinfo') }}</view>
			</view>
		</view>
		<zero-back-top :scrollTop="scrollTop"></zero-back-top>
		<orange-fullloading v-if="isshow" text="loding..."></orange-fullloading>
	</view>
</template>


<script>
	import swiperSearch from "@/components/swiper-search.vue"
	import zjcscrollnav from "@/components/zjc-scroll-nav.vue"
	import postlist from "@/components/postlist.vue"

	export default {
		components: {
			swiperSearch,
			zjcscrollnav,
			postlist
		},
		data() {
			return {
				isshow:true,
				scrollTop: 0,
				index: 0,
				cateList: [],
				topList: [],
				InfoList: []
			}
		},
		onPullDownRefresh() {
			this.init()
			this.getInfo(this.index)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onShow() {
			this.init()
			this.getInfo(this.index)
		},
		methods: {
			submit() {
				uni.navigateTo({
					url: '/pages/information/releaseinfo/index'
				})
			},
			tab(e) {
				this.index = e
				this.getInfo(e)
			},
			goToInfo(id) {
				uni.navigateTo({
					url: '/pages/index/tiezi_info?id=' + id
				})
			},
			getInfo(sort) {
				this.InfoList = []
				let sortName
				switch (+sort) {
					case 0:
						sortName = ''
						break
					case 1:
						sortName = 'latest'
						break
					case 2:
						sortName = 'distance'
						break
				}
				const params = {
					map: 'applet_city_post_list',
					page: 0,
					category: 0,
					sort: sortName,
					secondId: 0
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						uni.stopPullDownRefresh()
						this.InfoList = res.data.data
						this.isshow = false
					} else {
						uni.stopPullDownRefresh()
						this.isshow = false
					}
				})
			},
			init() {
				const params = {
					map: 'applet_city_index',
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.cateList = res.data.data
					} else {}
				})
				const params1 = {
					map: 'applet_city_shop_page'
				}
				this.$Request({
					method: 'GET',
					data: params1
				}).then(res => {
					if (res.data.ec == 200) {
						this.topList = res.data.data.mainSlide
					} else {}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.tab-box {
		border-bottom: 1px solid #e2e4e6;
		padding: 20rpx 0;
		margin-top: 10rpx;
		background-color: #FFFFFF;

		.tab {
			padding: 0 60rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			font-weight: 600;
		}

		.lan {
			color: #2497ff;
		}

		.hei {
			color: #333333;
		}

		.xian {
			width: 60%;
			height: 10rpx;
			background-color: #2497ff;
			border-radius: 20rpx;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 100%);
		}

	}

	.tab>view {
		position: relative;
	}

	.apply {
		position: fixed;
		background-color: #39b8ff;
		background: linear-gradient(#fecb81, #f08519);
		right: 0;
		bottom:25%;
		color: #FFFFFF;
		padding: 4rpx 20rpx;
		border-radius: 40rpx 0 0 40rpx;
		font-style: oblique;
		display: flex;
		justify-content: space-between;
		opacity: 0.8;
		z-index: 99999999999;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
			margin-top: 20rpx;
		}

		.text {
			text-align: center;
			.s {
				font-size: 26rpx;
				font-weight: bold;
			}

			.x {
				font-size: 22rpx;
				border-top: 1px solid #FFFFFF;
			}
		}
	}
</style>
